 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width2">资金流水列表</div>
      </div>
      <div class="content-con">
        <Form>
          <Row :gutter="16" type="flex" justify="end" class="code-row-bg">
            <Col span="4">
              <FormItem>
                <Date-picker size="large" style="width: 100%;" type="datetime" placeholder="开始时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem>
                <Date-picker size="large" style="width: 100%;" type="datetime" placeholder="结束时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem>
                <i-input size="large" :value.sync="value" placeholder="代付单号"></i-input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem>
                <i-input size="large" :value.sync="value" placeholder="转账单号"></i-input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem>
                <i-select size="large" :model.sync="model2" style="color: #000;" placeholder="资金变动方向">
                  <i-option v-for="item in moneyList" :value="item.value">{{ item.label }}</i-option>
                </i-select>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem>
                <i-select size="large" :model.sync="model3" style="color: #000;" placeholder="业务类型">
                  <i-option v-for="item in typeList" :value="item.value">{{ item.label }}</i-option>
                </i-select>
              </FormItem>
            </Col>
            <Col span="1">
              <FormItem class="btn-search">
                <i-button size="large" class="btn-green">搜索</i-button>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <Page :id="pageId"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"
             show-total show-sizer show-elevator></Page> <!-- page组件 -->
            <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button>
          </div>
        </div>
      </div>
   </Card>

 </template>
<script>

let testData = {
  histories: [
    {
      serialNumber: '流水号222',
      changeAmount: '+999',
      beforeBalance: '0',
      afterBalance: '999',
      businessType: '调账',
      paidOrder: '22222222222222222',
      transferOrder: '11111111111111111',
      time: '2020-09-25 11:33:58'
    },
    {
      serialNumber: '流水号222',
      beforeBalance: '0',
      changeAmount: '-999',
      afterBalance: '999',
      businessType: '调账',
      paidOrder: '222222222222222',
      transferOrder: '1111111111111111',
      time: '2020-09-25 11:33:58'
    },
    {
      serialNumber: '流水号222',
      beforeBalance: '0',
      changeAmount: '+999',
      afterBalance: '999',
      businessType: '调账',
      paidOrder: '222222222222222222',
      transferOrder: '11111111111111111',
      time: '2020-09-25 11:33:58'
    }
  ]
}
export default {
  name: 'staff-capital',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      value: '',
	   pageId: 'targetpage',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '流水号',
          key: 'serialNumber',
          width: 150
        },
        {
          title: '变更金额(元)',
          key: 'changeAmount',
          width: 120,
          render: (h, params) => {
            const row = params.row
            if (row.changeAmount > 0) {
              return h('span', {
                style: {
                  color: '#4daa5d'
                }
              }, row.changeAmount)
            } else if (row.changeAmount < 0) {
              return h('span', {
                style: {
                  color: 'red'
                }
              }, row.changeAmount)
            }
          }
        },
        {
          title: '变更前余额(元)',
          key: 'beforeBalance',
          width: 120
        },
        {
          title: '变更后余额(元)',
          key: 'afterBalance',
          width: 120
        },
        {
          title: '业务类型',
          key: 'businessType',
          width: 100
        },
        {
          title: '代付订单号',
          key: 'paidOrder',
          width: 300
        },
        {
          title: '转账订单号',
          key: 'transferOrder',
          width: 300
        },
        {
          title: '时间',
          key: 'time',
          width: 260
        },
        {
          title: '操作',
          key: 'action',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: 'cap-view'
                      })
                    }
                  }
                },
                '查看'
              )
            ])
          }
        }
      ],
      foodData: [],
      moneyList: [
        {
          value: '0',
          label: '资金变动方向'
        },
        {
          value: '1',
          label: '加款'
        },
        {
          value: '2',
          label: '减款'
        }
      ],
      model2: '',
      typeList: [
        {
          value: '0',
          label: '业务类型'
        },
        {
          value: '1',
          label: '提现'
        },
        {
          value: '2',
          label: '调账'
        },
        {
          value: '3',
          label: '充值'
        },
        {
          value: '4',
          label: '代付'
        },
        {
          value: '5',
          label: '佣金'
        }
      ],
      model3: ''
    }
  },
  methods: {
    // 获取历史记录信息
    handleListApproveHistory () {
      // 保存取到的所有数据
      this.ajaxHistoryData = testData.histories
      this.exportdata = testData.histories
      this.dataCount = testData.histories.length
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (testData.histories.length < this.pageSize) {
        this.foodData = this.ajaxHistoryData
      } else {
        this.foodData = this.ajaxHistoryData.slice(0, this.pageSize)
      }
    },
    // 点击切换页面
    changepage (index) {
      // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
      let _start = (index - 1) * this.pageSize
      // 需要显示结束数据的index
      let _end = index * this.pageSize
      // 截取需要显示的数据
      this.foodData = this.ajaxHistoryData.slice(_start, _end)
      // 储存当前页
      this.pageCurrent = index
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      let _start = (this.pageCurrent - 1) * index
      let _end = this.pageCurrent * index
      this.foodData = this.ajaxHistoryData.slice(_start, _end)
      // 实时获取当前需要显示的条数
      this.pageSize = index
    },

	 // 点击确认，跳转到输入的页码
	 goElevatorPage () {
	   var evtObj
	   var thisPage = document.getElementById(this.pageId)
	   // var thisPage=this.$refs.myPage;//也可以用ref来获取page这个dom
	   var elevatorDiv = thisPage.getElementsByClassName('ivu-page-options-elevator')
	   // 如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到
	   if (elevatorDiv && elevatorDiv.length > 0) {
	    var pageInput = elevatorDiv[0].getElementsByTagName('input')[0]
	        if (window.KeyEvent) { // firefox 浏览器下模拟事件
	           evtObj = document.createEvent('KeyEvents')
	           evtObj.initKeyEvent('keyup', true, true, window, true, false, false, false, 13, 0)
	       } else { // chrome 浏览器下模拟事件
	           evtObj = document.createEvent('UIEvents')
	           evtObj.initUIEvent('keyup', true, true, window, 1)
	           delete evtObj.keyCode
	           if (typeof evtObj.keyCode === 'undefined') { // 为了模拟keycode
	               Object.defineProperty(evtObj, 'keyCode', { value: 13 })
	           } else {
	               evtObj.key = String.fromCharCode(13)
	           }
	       }
	       pageInput.dispatchEvent(evtObj)
	    }
	  }
  },
  created () {
    this.handleListApproveHistory()
  }
}
</script>
 <style lang="less">
 </style>
